<template>
    <el-aside :width="isCollapsed ? '64px' : '220px'" class="sidebar" :class="{ collapsed: isCollapsed }">
        <div class="logo">
            <img :src="logoUrl" alt="logo" class="logo-img" />
            <span class="logo-text" v-show="!isCollapsed">蜜雪冰城</span>
        </div>
        <el-menu :default-active="activeMenu" :collapse="isCollapsed" :background-color="isDark ? '#18181c' : '#fff'"
            :text-color="isDark ? '#e5eaf3' : '#303133'" :active-text-color="isDark ? '#409EFF' : '#1677ff'"
            class="el-menu-vertical-demo sidebar-menu" @select="onMenuSelect" ref="menuRef" router
            :unique-opened="true">
            <SidebarMenuItem v-for="item in menuList" :key="item.path" :item="item" :collapse="isCollapsed" />
        </el-menu>
    </el-aside>
</template>
<script setup>
import { ref } from 'vue'
import SidebarMenuItem from './SidebarMenuItem.vue'
import { Odometer, Document, Setting, Grid, Tools, Help, Edit } from '@element-plus/icons-vue'
import logoUrl from '../assets/logo.png'

defineProps({
    activeMenu: String,
    isDark: Boolean,
    isCollapsed: Boolean
})
const emit = defineEmits(['select'])
const menuRef = ref(null)
function onMenuSelect(index) {
    emit('select', index)
}

// 多级菜单数据结构，支持无限嵌套
const menuList = [
    {
        path: '/dashboard',
        title: '仪表盘',
        icon: Odometer,
        children: [
            { path: '/dashboard/workbench', title: '工作台' },
            { path: '/dashboard/analysis', title: '分析页' },
            { path: '/dashboard/ecommerce', title: '电子商务' }
        ]
    },
    {
        path: '/template',
        title: '模板中心',
        icon: Grid,
        children: [
            { path: '/template/1', title: '模板1' },
            { path: '/template/2', title: '模板2' }
        ]
    },
    {
        path: '/component',
        title: '组件中心',
        icon: Grid,
        children: [
            { path: '/component/1', title: '组件1' },
            { path: '/component/2', title: '组件2' }
        ]
    },
    {
        path: '/example',
        title: '功能示例',
        icon: Edit,
        badge: '•',
        children: [
            { path: '/example/1', title: '示例1' },
            { path: '/example/2', title: '示例2' }
        ]
    },
    {
        path: '/system',
        title: '系统管理',
        icon: Setting,
        children: [
            { path: '/system/user', title: '用户管理' },
            { path: '/system/role', title: '角色管理' },
            { path: '/system/permission', title: '权限管理' }
        ]
    },
    {
        path: '/article',
        title: '文章管理',
        icon: Document,
        children: [
            { path: '/article/list', title: '文章列表' },
            { path: '/article/edit', title: '文章编辑' }
        ]
    },
    {
        path: '/ops',
        title: '运维管理',
        icon: Tools,
        children: [
            { path: '/ops/monitor', title: '监控' },
            { path: '/ops/log', title: '日志' }
        ]
    },
    {
        path: '/help',
        title: '帮助中心',
        icon: Help
    },
    {
        path: '/changelog',
        title: '更新日志',
        icon: Document,
        badge: 'v2.5.2'
    },
    {
        path: '/user/profile',
        title: '个人中心',
        icon: Odometer
    }
]
</script>
<style scoped>
.sidebar {
    background: var(--el-bg-color-menu, var(--el-bg-color, #fff)) !important;
    border-right: none !important;
    min-height: 100vh;
    transition: width 0.2s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    box-shadow: none !important;
    z-index: 10;
}

.sidebar.collapsed {
    background: var(--el-bg-color-menu, var(--el-bg-color, #fff)) !important;
    box-shadow: none !important;
    z-index: 10;
}

:deep(.el-aside) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    padding-left: 18px;
    margin-bottom: 4px;
}

.logo-img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    transition: margin 0.2s;
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: var(--el-color-primary, #409EFF);
    transition: opacity 0.2s, width 0.2s;
    white-space: nowrap;
}

.sidebar.collapsed .logo-img {
    margin-right: 0;
}

.sidebar.collapsed .logo-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}

.sidebar-menu {
    border: none !important;
    background: transparent !important;
    flex: 1 1 0;
    overflow: hidden !important;
    padding: 0 !important;
    --el-menu-border-color: transparent !important;
}

:deep(.el-menu),
:deep(.el-menu--vertical),
:deep(.el-menu-item),
:deep(.el-sub-menu__title),
:deep(.el-menu--popup),
:deep(.el-menu--popup .el-menu-item),
:deep(.el-menu--popup .el-sub-menu__title) {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

:deep(.el-menu-item),
:deep(.el-sub-menu__title) {
    border-radius: 8px;
    margin: 4px 8px;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

:deep(.el-menu-item.is-active),
:deep(.el-menu-item:hover),
:deep(.el-sub-menu__title:hover) {
    background: var(--el-bg-color-menu-active, var(--el-color-primary-light-9, #f5f7fa)) !important;
    color: var(--el-color-primary, #1677ff) !important;
}

:deep(.el-menu-item .el-icon),
:deep(.el-sub-menu__title .el-icon) {
    font-size: 20px;
}

:deep(.el-menu--collapse .el-menu-item__title),
:deep(.el-menu--collapse .el-sub-menu__title span) {
    display: none !important;
}

/* 深色模式适配，依赖主题变量 */
:deep(.dark) .sidebar,
:deep(.dark) .sidebar.collapsed,
:deep(.dark) .el-aside {
    background: var(--el-bg-color-menu, #181a20) !important;
    border-right: none !important;
    box-shadow: none !important;
    border-left: none !important;
}

:deep(.dark) .sidebar-menu {
    background: transparent !important;
    --el-menu-border-color: transparent !important;
}

:deep(.dark) .el-menu-item,
:deep(.dark) .el-sub-menu__title {
    color: #bfcbd9 !important;
    font-size: 16px;
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    font-weight: 500;
    background: transparent !important;
    border: none !important;
}

:deep(.dark) .el-menu-item.is-active {
    background: var(--el-bg-color-menu-active, #232b3b) !important;
    color: #5d79c3 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    border: none !important;
    z-index: 2;
}

:deep(.dark) .el-menu-item.is-active .el-icon {
    color: #5d79c3 !important;
}

:deep(.dark) .el-menu-item.is-active .el-icon,
:deep(.dark) .el-menu-item:hover .el-icon,
:deep(.dark) .el-sub-menu__title:hover .el-icon {
    color: #409EFF !important;
}

/* 深色模式下折叠/展开都无白边，背景一致 */
:deep(.dark) .sidebar,
:deep(.dark) .sidebar.collapsed,
:deep(.dark) .el-aside {
    background: #181a20 !important;
    border-right: none !important;
    box-shadow: none !important;
}
</style>